<template>
	<view class="unique-index">
		<view class="unique-index-wrap">
			<image  class="header-img" src="/static/images/1_r1_c1.jpg"></image>
			<View class="unique-qrcode-wrap" v-on:click="scanCode"></View>
			<button class="unique-qrcode-btn" v-on:click="scanCode">点击扫描唯一码验真伪</button>
			
			<!-- <rich-text class="rich-ad" :nodes="adNode" v-if="is_show"></rich-text> -->
			<mp-html :content="adNode" :tag-style="{img: 'width:100%;'}" />
			
			<image class="footer-img" src="/static/images/1_r7_c2.jpg"></image>
		</view>
		<view class="customer-icon" @tap="goGoodCall">
			<text class="iconfont icon-ic_customerservice fs-40"></text>
			<text class="fs-18">客服</text>
		</view>
		<view class="goback-icon" @tap="goTop">
			<text class="iconfont icon-ic_up2 fs-40"></text>
			<text class="fs-18">置顶</text>
		</view>
		<pageFooter :style="colorStyle"></pageFooter>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import pageFooter from '@/components/pageFooter/index.vue';
	import { getAdDetail } from '@/api/unicode.js';
	import { toLogin } from '@/libs/login.js';
	export default {
		name: "UniqueCode",
		components: {
		  pageFooter
		},
		data() {
			return {
				adNode: '<p><a target=\"_blank\" href=\"https://club.gnpearl.net/uploads/attach/2024/10/20241018/84239e39ea1da6c64cba2628da2e51ac.png\">点击链接</a><br/></p><p>123</p><p><b>事实上是</b></p><h1><b id=\"rf62n\">时代风尚</b></h1><div><b><br/></b></div><div><hr/><p><br/></p></div><div><b><font face=\"华文仿宋\"><strike>时代风尚地方</strike></font></b></div><div><b><font face=\"华文仿宋\"><u><i>哦哦积极i哦</i></u></font></b></div><div><b><font face=\"华文仿宋\" color=\"#c24f4a\"><u><i style=\"background-color: rgb(249, 150, 59);\">是的放松放松放</i></u></font></b></div><div><b><font face=\"华文仿宋\" color=\"#c24f4a\"><u><i style=\"background-color: rgb(249, 150, 59);\">是的是的发烧发烧发烧发时代风尚地方</i></u></font></b></div><ol><li><b><font face=\"华文仿宋\" color=\"#c24f4a\"><u><i style=\"background-color: rgb(255, 255, 255);\">是对方是否</i></u></font></b></li><li><b><font face=\"华文仿宋\" color=\"#c24f4a\"><u><i style=\"background-color: rgb(255, 255, 255);\">水电费水电费顺丰</i></u></font></b></li></ol><ul><li><font color=\"#c24f4a\" face=\"华文仿宋\"><b><i><u>是的是的分手的方式发</u></i></b></font></li><li><font color=\"#c24f4a\" face=\"华文仿宋\"><b><i><u>是的是的是的放松放松地方</u></i></b></font></li></ul><div style=\"text-align:left;\"><font color=\"#c24f4a\" face=\"华文仿宋\"><b><i><u>身上大放送顺丰放松放松</u></i></b></font></div><div style=\"text-align:left;\"><font color=\"#c24f4a\" face=\"华文仿宋\"><b><i><u>是的粉丝都是的方式地方</u></i></b></font></div><div style=\"text-align:justify;\"><p><video src=\"https://club.gnpearl.net/uploads/video/2025/02/13/20230525_f457361a0a01919c_412123027689_33077123287711_published_mp4_264_hd_taobao.mp4\" controls=\"\" style=\"max-width:100%;\"></video><br/></p></div><div style=\"text-align:justify;\"><span style=\"font-size: 14px;\"></span></div><p><img src=\"https://club.gnpearl.net/uploads/attach/2024/10/20241018/84239e39ea1da6c64cba2628da2e51ac.png\" style=\"max-width:100%;\"/></p>',
				is_show: 1,
			};
		},
		computed: {
		  ...mapGetters({
		    isLogin: 'isLogin'
		  })
		},
		mounted() {
			// this.getNode();
		},
		onLoad(options) {
			
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			goGoodCall() {
				let userInfo = uni.getStorage("USER_INFO")
				// let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				// let obj = {
				// 	store_name: this.storeInfo.store_name,
				// 	path: `/pages/goods_details/index?id=${this.storeInfo.id}`,
				// 	image:this.storeInfo.image
				// }
				this.$util.getCustomer(userInfo, null, null, 0)
			},
			getNode() {
				getAdDetail({id: 1}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.adNode = res?.data?.content;
						// this.is_show = res?.data?.is_show;
					}
				}).catch((msg) => {
					this.is_show = 0;
				});
			},
			scanCode() {
				const that = this;
				if(this.isLogin === false) {
					toLogin();
				} else {
					uni.scanCode({
						success: function (res) {
							const obj = that.getFormattedSearchParams(res.result);
							if(obj?.serialId) {
								uni.navigateTo({
									url:"/pages/unique_code/result?serialId=" + obj?.serialId
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: "唯一码无效，请重试！"
								})
							}
						},
						fail:function(){
							uni.showToast({
								icon: 'error',
								title: "调起扫码失败，请重试！"
							})
						}
					});
				}
			},
			getFormattedSearchParams(url) {
			  // 提取查询字符串部分
			  const queryString = url.split('?')[1];
			
			  // 如果没有查询字符串，返回空对象
			  if (!queryString) {
			    return {};
			  }
			
			  // 分割成键值对数组
			  const pairs = queryString.split('&');
			
			  // 创建一个空对象用于存储格式化后的参数
			  const params = {};
			
			  // 遍历每个键值对
			  for (const pair of pairs) {
			    // 跳过空字符串（处理连续的 & 符号）
			    if (!pair) continue;
			
			    // 分割成键和值，并解码
			    const [key, value] = pair.split('=').map(decodeURIComponent);
			
			    // 如果参数中已有该键，且该键的值不是数组，则将其转换为数组
			    if (params[key]) {
			      if (!Array.isArray(params[key])) {
			        params[key] = [params[key]];
			      }
			      params[key].push(value);
			    } else {
			      params[key] = value;
			    }
			  }
			
			  return params;
			}
		}
	};
</script>

<style scoped lang="scss">
	.rich-ad {
		margin: 40rpx;
	}
	.unique-index {
		background-color: #86151a;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.unique-index-wrap {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: url("@/static/images/1_r3_c1.jpg");
		background-size: contain;
		padding-bottom: 156rpx;
		border-bottom: 16rpx solid #86151a;
		
		.header-img {
			height: 168rpx;
			width: 100%;
		}
		
		.footer-img {
			display: block;
			height: 564rpx;
			width: 650rpx;
			margin: 40rpx auto 0;
		}
	}
	.unique-qrcode-wrap {
		width: 100vw;
		flex: 1;
		min-height: 300rpx;
		background-image: url("@/static/images/qrcode.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 260rpx 260rpx;
	}
	.unique-qrcode-btn {
		font-size: 14px;
		border-radius: 4rpx;
		margin: 20rpx auto 0;
		width: 420rpx;
		padding: 8rpx 0;
		color: #fff;
		background-color: #86151a;
		border: 1rpx solid #86151a;
	}
	.customer-icon {
		position: fixed;
		bottom: 280rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.goback-icon {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
</style>